---
import Layout from "../layouts/Layout.astro";
import { CONFIG } from "../scripts/client/config";
---

<Layout title="Webterm Terminal">
  <!-- Header -->
  <nav class="navbar navbar-expand-lg shadow-sm">
    <div class="container py-2">
      <a class="navbar-brand fw-bold" href="/">
        <span class="h4 mb-0">Webterm</span>
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link" href="https://github.com/nasa42/webterm#quickstart">Install</a></li>
          <li class="nav-item"><a class="nav-link" href="https://github.com/nasa42/webterm">GitHub</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div>
    <div class="container py-5">
      <div class="text-center mb-5 py-4">
        <h1 class="display-3 fw-bold mb-4 lh-sm">Securely access your server's<br />terminal from anywhere</h1>
        <p class="lead mb-0 text-secondary mx-auto" style="max-width: 600px;">
          Even when they are behind by a firewall, inaccessible from the Internet, have restricted incoming ports,
          reside on a private network, or use dynamic IP addresses.
        </p>
      </div>

      <div class="row flex-column-reverse flex-lg-row g-4 pb-5">
        <div class="col-lg-7">
          <div class="card border-0 shadow-sm h-100">
            <div class="card-body p-4">
              <h2 class="h4 mb-4">Quick Installation</h2>
              <p class="text-secondary">
                Install the free and open-source agent, built with Rust for high efficiency and extremely light resource
                usage.
              </p>
              <div>
                <ol>
                  <li class="mb-4">
                    <p>Install the agent</p>
                    <code class="bg-light px-4 py-4 rounded-4 d-block">
                      curl -sSfL https://webterm.run/install.sh | bash
                    </code>
                  </li>

                  <li class="mb-4">
                    <p>Run the agent (add <code>--daemon</code> to run in background)</p>

                    <code class="bg-light px-4 py-4 rounded d-block">
                      webterm-agent --device-name &lt;DEVICE_NAME&gt; --secret-key &lt;SECRET_KEY&gt;
                    </code>
                  </li>
                </ol>
              </div>
              <div class="mt-3">
                <a href="https://github.com/nasa42/webterm#quickstart" class="btn btn-outline-primary me-3"
                  >Installation Instructions</a
                >
                <a href="https://github.com/nasa42/webterm#how-it-works" class="btn btn-link text-primary"
                  >How does it Work?</a
                >
              </div>
            </div>
          </div>
        </div>

        <!-- Right Column - Form -->
        <div class="col-lg-5">
          <div class="card border-0 shadow-sm">
            <div class="card-body p-4">
              <form id="app-homepage-form">
                <div class="mb-4">
                  <label for="app-device-name" class="form-label fw-medium">Device Name</label>
                  <input type="text" class="form-control form-control-lg" id="app-device-name" name="device-name" />
                </div>
                <div class="mb-4">
                  <label for="app-secret-key" class="form-label fw-medium">Secret Key</label>
                  <input type="password" class="form-control form-control-lg" id="app-secret-key" name="secret-key" />
                </div>
                <button type="submit" class="btn btn-primary btn-lg w-100">Connect</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Footer -->
    <footer class="border-top py-5">
      <div class="container">
        <div class="row gy-4">
          <div class="col-lg-5">
            <h5 class="mb-3">Webterm</h5>
            <p class="text-secondary">An open source project for secure terminal access.</p>
          </div>
          <div class="col-lg-3">
            <h6 class="mb-3">Documentation</h6>
            <ul class="list-unstyled">
              <li>
                <a href="https://github.com/nasa42/webterm" class="text-secondary text-decoration-none">Readme</a>
              </li>
              <li>
                <a href="https://github.com/nasa42/webterm#how-it-works" class="text-secondary text-decoration-none"
                  >How it Works</a
                >
              </li>
            </ul>
          </div>
          <div class="col-lg-4">
            <h6 class="mb-3">Community</h6>
            <ul class="list-unstyled">
              <li>
                <a href="https://github.com/nasa42/webterm" class="text-secondary text-decoration-none">GitHub</a>
              </li>
              <li>
                <a href="https://github.com/nasa42/webterm/discussions" class="text-secondary text-decoration-none"
                  >Discussions</a
                >
              </li>
              <li>
                <a href="https://github.com/nasa42/webterm/issues" class="text-secondary text-decoration-none"
                  >Report an Issue</a
                >
              </li>
            </ul>
          </div>
        </div>

        {
          CONFIG.gitCommit && (
            <div class="row mt-4 pt-2 mb-0 border-top">
              <div class="col-12 text-right">
                <p class="text-secondary small">
                  Deployed commit
                  <a href={CONFIG.deploymentCommitURL()} class="text-secondary text-decoration-none">
                    {CONFIG.gitCommit.slice(0, 7)}
                  </a>
                  .
                </p>
              </div>
            </div>
          )
        }
      </div>
    </footer>

    <script src="../scripts/client/entry-points/homepage.ts"></script>
  </div>
</Layout>
